<template>
  <div class="report-desc">
    <top-bar :isBlack="true" title="业绩报告"></top-bar>
    <div class="card-list">
      <div v-for="item in info" :key="item.id" class="card">
        <div class="card-title">
          <p>类型：</p>
          <p>{{ type }} Leads</p>
        </div>
        <div class="card-body">
          <!-- <div class="card-body-item">
            <p class="card-label">RFP 1st Sent Date</p>
            <p class="card-value">{{ item["RFP 1st Sent Date"] }}</p>
          </div> -->
          <div class="card-body-item">
            <p class="card-label">RFP ID</p>
            <p class="card-value">{{ item["RFP ID"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Lead Share Id</p>
            <p class="card-value">{{ item["Lead Share Id"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Lead Status</p>
            <p class="card-value">{{ item["Lead Status"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Sender Full Name</p>
            <p class="card-value">{{ item["Sender Full Name"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Sender Hotel Code</p>
            <p class="card-value">{{ item["Sender Hotel Code"] }}</p>
          </div>
          <!-- <div class="card-body-item block">
            <p class="card-label">Sender Hotel Name</p>
            <p class="card-value">{{ item["Sender Hotel Name"] }}</p>
          </div> -->
          <div class="card-line"></div>
          <!-- <div class="card-body-item">
            <p class="card-label">Receiver Hotel Code</p>
            <p class="card-value">{{ item["Receiver Hotel Code"] }}</p>
          </div> -->
          <div class="card-body-item block">
            <p class="card-label">Receiver Hotel Email Id</p>
            <p class="card-value">{{ item["Receiver Hotel Email Id"] }}</p>
          </div>
          <div class="card-line"></div>
          <!-- <div class="card-body-item">
            <p class="card-label">Receiver Hotel Chain Cd</p>
            <p class="card-value">{{ item["Receiver Hotel Chain Cd"] }}</p>
          </div> -->
          <div class="card-body-item">
            <p class="card-label">Receiver Full Name</p>
            <p class="card-value">{{ item["Receiver Full Name"] }}</p>
          </div>
          <div class="card-body-item block">
            <p class="card-label">Receiver Hotel Name</p>
            <p class="card-value">{{ item["Receiver Hotel Name"] }}</p>
          </div>
          <div class="card-line"></div>
          <div class="card-body-item">
            <p class="card-label">Meeting Name</p>
            <p class="card-value">{{ item["Meeting Name"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Room Start Date</p>
            <p class="card-value">{{ item["Room Start Date"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Room End Date</p>
            <p class="card-value">{{ item["Room End Date"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Receiver Full Name</p>
            <p class="card-value">{{ item["Receiver Full Name"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Sub-Region</p>
            <p class="card-value">{{ item["Sub-Region"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Total Definite Revenue- USD</p>
            <p class="card-value">
              {{ item["Total Definite Revenue- USD"] | getEnUs }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBar from "@/components/topBar.vue";
export default {
  name: "reportDesc",
  data() {
    return {
      type: "",
      info: null,
    };
  },
  mounted() {
    this.type = this.$route.query.type;
    if (this.type == "Total") {
      this.getTotalLead(this.$route.query.code);
    } else {
      this.getDefiniteLead(this.$route.query.code);
    }
  },
  methods: {
    getDefiniteLead(code) {
      this.$api.definiteLead({ code }).then((res) => {
        if (res.status_code == 200) {
          this.info = res.data;
        }
      });
    },
    getTotalLead(code) {
      this.$api.totalLead({ code }).then((res) => {
        if (res.status_code == 200) {
          this.info = res.data;
        }
      });
    },
  },
  filters: {
    getEnUs(val) {
      return ((val * 1).toFixed(2) * 1).toLocaleString("en-US");
    },
  },
  components: {
    TopBar,
  },
};
</script>

<style lang="scss" scoped>
.report-desc {
  height: 100vh;
  background-color: #f4f4f4;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  overflow-y: auto;
  .card-list {
    .card {
      margin-top: 10px;
      background-color: #fff;
      .card-title {
        background: #224448;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        p {
          font-size: 14px;
          font-weight: bold;
          color: #ffffff;
        }
      }
      .card-body {
        padding: 0 15px 20px;
        word-break: break-all;
        .card-body-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 15px;
          &.block {
            display: block;
            .card-value {
              padding-left: 15px;
              margin-top: 15px;
            }
          }
          .card-label {
            font-size: 13px;
            color: #666666;
            padding-left: 15px;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              width: 5px;
              height: 5px;
              background-color: #224448;
              border-radius: 50%;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }

          .card-value {
            font-size: 13px;
            font-weight: bold;
            color: #224448;
          }
        }
        .card-line {
          height: 1px;
          background-color: #f4f4f4;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>